<template>
  <div class="music">
    <h3>Music</h3>
    <div>
      <router-link to="/Home/Music/MusicDetail/1/20">周杰伦</router-link>
      <router-link to="/Home/Music/MusicDetail/2/25">林俊杰</router-link>
      <router-link to="/Home/Music/MusicDetail/3">陈奕迅</router-link>

      <button
        @click="
          $router.push({
            //path: '/Home/Music/MusicDetail', // path过长 所以用name属性
            name: 'MusicDetail',
            params: {
              id: '1',
              age: '20'
            }
          })
        "
      >
        周杰伦
      </button>
      <button
        @click="
          $router.push({
            //path: '/Home/Music/MusicDetail',
            name: 'MusicDetail',
            params: {
              id: '2',
              age: '20'
            }
          })
        "
      >
        林俊杰
      </button>
      <button
        @click="
          $router.push({
            //path: '/Home/Music/MusicDetail',
            name: 'MusicDetail',
            params: {
              id: '3',
              age: null
            }
          })
        "
      >
        陈奕迅
      </button>
    </div>
    <!-- 三级路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Music',
  mounted() {
    console.log('Music mounted')
  },
  beforeDestroy() {
    console.log('Music beforeDestroy')
  }
}
</script>

<style scoped>
.music {
  background-color: orange;
}
</style>
